<template>
	<view class="page">
		<view>
			<view style="text-align: center;padding-top: 120rpx;">
				<view style="display: flex;justify-content: center;">
					<u-icon name="checkmark-circle-fill" color="#97d77f" size="50"></u-icon>
				</view>
				<view style="font-weight: bold;margin-top: 30rpx;">交易成功</view>
			</view>
		</view>


		<view class="div_box">
			<view style="border-radius: 40rpx;overflow: hidden;width: 30%;">
				<image src="https://img.xieling.top/12.jpg" mode="widthFix" style="width: 200rpx;"></image>
			</view>
			<view
				style="width: 60%;display: flex;flex-direction:column ;justify-content: space-between;height: 180rpx;">
				<view style="font-size: 28rpx;font-weight: bold;">卧式羊型铜灯</view>
				<view class="crad-tip">
					<view class="tip-half">
						<text class="tip-half-neo">AC9063#8030/10000</text>
					</view>
				</view>
				<view style="margin-top: 20rpx;opacity: 0.5;">西安博物馆</view>
			</view>
		</view>
		
		
		<view style="width: 90%;margin: auto;margin-top: 30rpx;">
			<view class="order_text">
				<view style="font-size: 24rpx;opacity: 0.5;">订单金额</view>
				<view>19.9元</view>
			</view>
			<view class="order_text">
				<view style="font-size: 24rpx;opacity: 0.5;">交易数量</view>
				<view>1</view>
			</view>
			<view class="order_text">
				<view style="font-size: 24rpx;opacity: 0.5;">创建时间</view>
				<view>2022-01-29 12:00:01</view>
			</view>
			<view class="order_text">
				<view style="font-size: 24rpx;opacity: 0.5;">付款时间</view>
				<view>2022-01-29 12:00:36</view>
			</view>
			<view class="order_text">
				<view style="font-size: 24rpx;opacity: 0.5;">订单编号</view>
				<view>202201290111103207082</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.order_text{display: flex;justify-content: space-between;align-items: center;margin-top: 20rpx;}
	.div_box{display: flex;justify-content: space-between;background-color: #2d2d2d;border-radius: 30rpx;align-items: center;width: 90%;margin: auto;margin-top: 50rpx;}
	.crad-tip {
		display: flex;
		/* text-align: center; */
		margin-top: 20rpx;
		/* justify-content: center; */
	}

	.tip-half{
		height: 40rpx;
		background-color: #f3e0bc;
		font-size: 22rpx;
		line-height: 40rpx;
		border-radius: 5rpx;
		
	}
	.tip-half-neo{
		background-color: #f3e0bc;
		height: 40rpx;
		color: #2B2C2E;
		font-size: 22rpx;
		font-weight: 600;
		line-height: 40rpx;
		padding: 0rpx 10rpx;
		
		
	}
</style>
